<script setup lang="ts">
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import type { FormItemProps } from "../utils/types";
import { http } from "@/utils/http";
import { changeHttpLink } from "@/utils/test";
import { message } from "@/utils/message";

const props = defineProps<FormItemProps>();
const emit = defineEmits(["success"]);

const formRef = ref();
const form = ref<{
  id?: number;
  name?: string;
  code?: number;
  type?: number;
  uri?: string;
  tenantId?: number;
  tenantName?: string;
  dealerId?: number;
  dealerName?: string;
  remark?: string;
  [key: string]: any;
}>({});

// 表单规则
const rules = {
  name: [
    {
      required: true,
      message: "请输入资产名称",
      trigger: "blur"
    }
  ],
  code: [
    {
      required: true,
      message: "请输入资产编号",
      trigger: "blur"
    }
  ],
  type: [
    {
      required: true,
      message: "请选择资产类型",
      trigger: "blur"
    }
  ],
  uri: [
    {
      required: true,
      message: "请上传资产文件",
      trigger: "change"
    }
  ]
};

watch(
  () => props.form,
  val => {
    form.value = { ...val };
  },
  {
    immediate: true
  }
);

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = { ...form.value };

      http
        .post(
          changeHttpLink(
            props.type === "新增" ? "/api/Asset/Add" : "/api/Asset/Update"
          ),
          {
            data: params
          }
        )
        .then((res: any) => {
          if (res.Success) {
            message(`${props.type}资产成功`, { type: "success" });
            emit("success");
          } else {
            message(res.Message, { type: "error" });
          }
        })
        .catch(err => {
          message(err.message, { type: "error" });
        });
    }
  });
}

function handleUploadSuccess(response, uploadFile) {
  if (response.status === "success") {
    form.value.uri = response.data.filePath;
    ElMessage({
      message: "上传成功",
      type: "success"
    });
  } else {
    ElMessage({
      message: response.message || "上传失败",
      type: "error"
    });
  }
}
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item v-if="props.type === '修改'" label="资产ID" prop="id">
      <el-input v-model="form.id" placeholder="资产ID" disabled />
    </el-form-item>
    <el-form-item label="资产名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入资产名称" />
    </el-form-item>
    <el-form-item label="资产编号" prop="code">
      <el-input
        v-model="form.code"
        placeholder="请输入资产编号"
        type="number"
      />
    </el-form-item>
    <el-form-item label="资产类型" prop="type">
      <el-select v-model="form.type" placeholder="请选择资产类型">
        <el-option label="普通音频文件" value="1" />
        <el-option label="TTS语音包" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="资产文件" prop="uri">
      <el-upload
        v-if="props.type === '新增'"
        action="/api/upload"
        :on-success="handleUploadSuccess"
        :show-file-list="true"
        :file-list="
          form.uri ? [{ name: form.uri.split('/').pop(), url: form.uri }] : []
        "
      >
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <el-input v-else v-model="form.uri" placeholder="文件路径" disabled />
    </el-form-item>
    <el-form-item label="租户ID" prop="tenantId">
      <el-input
        v-model="form.tenantId"
        placeholder="请输入租户ID"
        type="number"
      />
    </el-form-item>
    <el-form-item label="租户名称" prop="tenantName">
      <el-input v-model="form.tenantName" placeholder="请输入租户名称" />
    </el-form-item>
    <el-form-item label="经销商ID" prop="dealerId">
      <el-input
        v-model="form.dealerId"
        placeholder="请输入经销商ID"
        type="number"
      />
    </el-form-item>
    <el-form-item label="经销商名称" prop="dealerName">
      <el-input v-model="form.dealerName" placeholder="请输入经销商名称" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="form.remark"
        placeholder="请输入备注信息"
        type="textarea"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 确定 </el-button>
      <el-button @click="formRef.value.resetFields()"> 重置 </el-button>
    </el-form-item>
  </el-form>
</template>
